

<template>
  <div class="bto f-row ani-appear" style="align-items: center; gap:10px;">
    <el-button style="margin-left:10px; width:50px;height:50px; font-size:20px;" size="large" type="primary"  circle :icon="Setting"
    @click="()=>{
      settingPageCom.apply();
    }"
    ></el-button>
    <el-button type="primary" @click="()=>{
      statisCom.apply();
    }">软件信息</el-button>
  </div>
  <setting-page ref="settingPageCom"></setting-page>
  <statis ref="statisCom"></statis>
</template>
<script setup>
import{ref} from 'vue';

import {Setting} from "@element-plus/icons-vue";
import SettingPage from "@/pages/wordPage/setting/settingPage.vue";
import Statis from "@/pages/wordPage/statis/statis.vue";
let settingPageCom=ref(null);
let statisCom=ref(null);

</script>
<style scoped>
.bto{
  background-color: rgba(255,251,251,0.52);
  backdrop-filter: blur(10px);
  border:1px solid transparent;
  position: absolute;
  width: 100%;
  height:50px;
  border-radius: 10px;
  top: 0px;
  gap:10px;
}
</style>